<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
*{ margin:0; padding:0; font-size:12px; font-family:"微软雅黑"; color:#333;}
ul,li{ list-style:none;}
input{ outline:none;}
a{ text-decoration:none; color:#333;}
.clear{ clear:both;}


.box{ width:50%; margin:auto;}
.box .column{ height:500px; font-size:36px; font-weight:900; text-align:center; background:#ccc; margin-bottom:20px;}
.box .column1{ height:500px;}
.box .column2{ height:600px;}
.box .column3{ height:700px;}
.box .column4{ height:800px;}
.box .column5{ height:600px;}
.box .column6{ height:800px;}
.box .column7{ height:800px;}
.box .column8{ height:900px;}
.box .column9{ height:900px;}
.box .column10{ height:900px;}

.plane{ position:fixed; top:50%; right:50%; width:30px; margin:-125px -35% 0 0;}
.plane li{ height:20px; line-height:20px; text-align:center; margin-bottom:5px; background:#ccc; cursor:pointer;}
.plane li.on{ background:#f60;}


.title{ padding:30px 0; font-size:32px;}

</style>

</head>

<body style="">

<div class="box">
	<div class="column column1">
    	<h1 class="title">视频1</h1>
    </div>
    <div class="column column2">
    	<h1 class="title">视频2</h1>
    </div>
    <div class="column column3">
    	<h1 class="title">视频3</h1>
    </div>
    <div class="column column4">
    	<h1 class="title">视频4</h1>
    </div>
    <div class="column column5">
    	<h1 class="title">视频5</h1>
    </div>
    <div class="column column6">
    	<h1 class="title">视频6</h1>
    </div>
    
</div>
<!--创建一个，放在最后面，解决效果最后一个，失效问题-->
<div class="column"></div>


<div class="plane">
	<ul>
      <li class="on">1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
      <li>6</li>
    </ul>
</div>
<script src="js/jquery-1.8.2.min.js"></script>
<script>

			var _top=[];
			var _height=[];
			var _parentTop=0;
			//var _parentTop=$(".box").offset().top;  //很重要，父元素离顶部窗口的距离
			var tt=$(".column");	//监控的对象
			for(var i=0;i<tt.length;i++){
				_top[i]=tt.eq(i).offset().top;  //得到每个div与顶部窗口的距离
				_height[i]=tt.eq(i).outerHeight(true);	//得到每个div的高度
			}
			
			//仿锚点效果:
			$(".plane li").click(function(){
				var index=$(this).index();
				$("html,body").stop(true,false).animate({scrollTop:_top[index]},1000);   
			});
			
			var videos=document.getElementsByTagName("video");
			 //滚动条事件：当滚动条下拉到不同div，相对应的某个元素 会发生不同的行为
		   $(window).scroll(function () {
			   for(var i=0;i<tt.length;i++){
				   var _scrollTop=parseInt($(this).scrollTop())+_height[i];  //得到垂直滚动条+每个div的高度
				    console.log(_scrollTop+":"+_top[i+1]);
				   if(_scrollTop>_top[i+1]-1 ){   //_top[i]<_scrollTop<_top[i+1]
					  $(".plane li").eq(i).addClass("on").siblings().removeClass("on");  //菜单高亮
				   }
		  	   }
		   }); 
		 
		 
		 
		 console.log(videos.length);
		

</script>
</body>
</html>
